<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<link rel="stylesheet" href="../../lib/layui-v2.6.3/css/layui.css" media="all">
	<link rel="stylesheet" href="../../css/public.css" media="all">
</head>
<body>

<!-- 弹出层添加新商品信息 -->
<div style="padding: 20px; height:500px">
	<form class="layui-form" id="addProductInfo">
		<div class="layui-form-item">
			<label class="layui-form-label">所属类别:</label>
			<div class="layui-input-inline" style="width: 160px;">
				<input type="text" name="proTypeId" readonly="readonly" lay-reqtext="所属类别不能为空"
					   lay-verify="required" required autocomplete="off" class="layui-input" id="searchFrame"
					   style="width: 135px">
				<span style="float: right;margin-top: -29px ;"><i class="layui-icon layui-icon-search"
																  id="searchIcon" style="font-size: 22px;"></i></span>
				<!-- 选择所属类别 -->
				<div id="searchCateGory" class="commodityType"
					 style="width: 225px;height: 228px;position: absolute;right: -20px;top: 31px;background: white;z-index: 10;display: none;">
					<fieldset class="layui-elem-field">
						<div id="cateGoryTree" class="demo-tree demo-tree-box"
							 style="width: 220px;height: 220px;overflow: auto;"></div>
					</fieldset>
				</div>
			</div>
			<label class="layui-form-label">商品编号:</label>
			<div class="layui-input-inline" style="width: 160px;">
				<input type="text" name="proId" lay-verify="required" readonly="" autocomplete="off"
					   class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">商品名称:</label>
			<div class="layui-input-inline" style="width: 160px;">
				<input type="text" name="proName" lay-verify="required" autocomplete="off" class="layui-input">
			</div>
			<label class="layui-form-label">商品条码:</label>
			<div class="layui-input-inline" style="width: 160px;">
				<input type="text" name="proBarCodes" autocomplete="off" class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">名称简拼:</label>
			<div class="layui-input-inline" style="width: 160px;">
				<input type="text" name="proAlias" lay-verify="required" readonly="" autocomplete="off"
					   class="layui-input">
			</div>
			<label class="layui-form-label">单&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;位:</label>
			<div class="layui-input-inline" style="width: 160px;">
				<select id="searchUnit" lay-filter="searchUnit" name="unitId">
					<option value="">请选择</option>
					<option value="newUnit">增加新的单位...</option>
				</select>
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">产品规格:</label>
			<div class="layui-input-inline" style="width: 160px;">
				<input type="text" name="proSize" lay-verify="required" autocomplete="off" class="layui-input">
			</div>
			<label class="layui-form-label">药剂类型:</label>
			<div class="layui-input-inline" style="width: 160px;">
				<select id="searchAgentia" lay-filter="searchAgentia" name="agentiaId">
					<option value="">请选择</option>
					<option value="newAgentia">增加新的药剂类型...</option>
				</select>
			</div>

		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">预设售价:</label>
			<div class="layui-input-inline" style="width: 160px;">
				<input type="text" name="proSalePrice" lay-verify="required" autocomplete="off"
					   class="layui-input">
			</div>
			<label class="layui-form-label ">预设进价:</label>
			<div class="layui-input-inline" style="width: 160px;">
				<input type="text" name="proBid" lay-verify="required" autocomplete="off" class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">库存下限:</label>
			<div class="layui-input-inline" style="width: 160px;">
				<input type="text" name="proStockLower" autocomplete="off" class="layui-input">
			</div>
			<label class="layui-form-label">保&nbsp;&nbsp;质&nbsp;&nbsp;期:</label>
			<div class="layui-input-inline" style="width: 120px;">
				<input type="text" name="proKeepDate" lay-verify="required" autocomplete="off"
					   class="layui-input">
			</div>
			<span style="line-height: 38px;">个&nbsp;月</span>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">俗称:</label>
			<div class="layui-input-inline" style="width: 160px;">
				<input type="text" name="proVulgo" autocomplete="off" class="layui-input">
			</div>
			<label class="layui-form-label">批准文号:</label>
			<div class="layui-input-inline" style="width: 160px;">
				<input type="text" name="proPostil" autocomplete="off" class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">生产厂商:</label>
			<div class="layui-input-inline" style="width: 160px;">
				<select id="searchManufacturerId" lay-filter="searchManufacturerId" name="manufacturerId"
						lay-verify="required">
					<option value="">请选择</option>
					<option value="newManufacturer">增加生产厂商...</option>
				</select>
			</div>
			<label class="layui-form-label">生产许可:</label>
			<div class="layui-input-inline" style="width: 140px;">
				<input type="text" name="manufacturePermit" autocomplete="off" class="layui-input">
			</div>
		</div>

		<div class="layui-form-item">
			<label class="layui-form-label">备注</label>
			<div class="layui-input-inline" style="width: 440px;">
				<input type="text" name="proComment" autocomplete="off" class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<div class="layui-btn-container">
				<button type="button" class="layui-btn layui-btn-sm" lay-event="laocomInsert"
						style="margin-left: 234px;" lay-submit="" lay-filter="addCon">保存</button>
				<button type="button" class="layui-btn layui-btn-sm" id="addExi">退出</button>
			</div>
		</div>
	</form>
</div>



<!-- 新增商品弹出层-增加新单位 -->
<div id="addNewUnit" style="display: none;padding: 15px 0;width: 330px;height: 85px;">
	<div class="layui-inline">
		<label class="layui-form-label">单位名称：</label>
		<div class="layui-input-inline">
			<input type="text" id="unitName" autocomplete="off" class="layui-input">
		</div>
	</div>
	<div class="layui-btn-container" style="margin-top: 10px;margin-left:40%;">
		<button type="button" class="layui-btn layui-btn-sm" id="unitCon" style="">保存</button>
		<button type="button" class="layui-btn layui-btn-sm" id="unitExi" style="">退出</button>
	</div>
</div>



<!-- 新增商品弹出层-增加药剂类型 -->
<div id="addNewAgentia" style="display: none;padding: 15px 0;width: 330px;height: 85px;">
	<div class="layui-inline">
		<label class="layui-form-label">药剂类型：</label>
		<div class="layui-input-inline">
			<input type="text" id="agentiaTypeName" autocomplete="off" class="layui-input">
		</div>
	</div>
	<div class="layui-btn-container" style="margin-top: 10px;margin-left:40%;">
		<button type="button" class="layui-btn layui-btn-sm" id="drugCon">保存</button>
		<button type="button" class="layui-btn layui-btn-sm" id="drugExi">退出</button>
	</div>
</div>
<!-- 新增生产厂商弹出层-新增生产厂商 -->
<div id="addnewManufacturer" style="display: none;padding: 15px 0;width: 330px;height: 85px;">
	<div class="layui-inline">
		<label class="layui-form-label">厂商名称：</label>
		<div class="layui-input-inline">
			<input type="text" id="manufacturerName" autocomplete="off" class="layui-input">
		</div>
	</div>
	<div class="layui-inline">
		<label class="layui-form-label">许可证：</label>
		<div class="layui-input-inline">
			<input type="text" id="manufacturePermit" autocomplete="off" class="layui-input">
		</div>
	</div>
	<div class="layui-btn-container" style="margin-top: 10px;margin-left:40%;">
		<button type="button" class="layui-btn layui-btn-sm" id="ManufCon">保存</button>
		<button type="button" class="layui-btn layui-btn-sm" id="ManufExi">退出</button>
	</div>
</div>
<script src="../../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script src="../../js/lay-config.js?v=1.0.4" charset="utf-8"></script>
<script>
    layui.use(['form', 'table', 'layer', 'tree', 'tableSelect'], function() {
        var $ = layui.jquery,
            form = layui.form,
            table = layui.table,
            tableSelect = layui.tableSelect,
            layer = layui.layer,
            tree = layui.tree;
        var laydate = layui.laydate;
        //保存商品分类编号
        var proTypeId = '';
        //保存弹出层的实例
        var indexList = [];

        //4.所属类别选择弹出层
        var searchCateGory = $("#searchCateGory");
        var isHidden = true;
        $("#searchIcon, #searchFrame").on('click', function(e) {
            //点击按钮时，不会触动 点击body隐藏盒子
            e.stopPropagation();
            if (isHidden == true) {
                searchCateGory.css('display', 'block');
                isHidden = false;
            } else if (isHidden == false) {
                searchCateGory.css('display', 'none');
                isHidden = true;
            }
        });
        //商品列表分类树形控件
        $.ajax({
            dataType: 'json',
            url: "/searchProdutType",
            success: function(msg) {
                tree.render({
                    elem: '#cateGoryTree' //绑定元素
                    ,
                    data: msg.data,
                    click: function(obj) {
                        if (obj.data.children == null) {
                            proTypeId = obj.data.id;
                            $("input[name=proTypeId]").val(obj.data.title); //所属类别名称
                            createProId(proTypeId);
                        }
                    }

                })
            }
        });

        //点击除了div本身外 关闭div
        $("body").on('click', function(e) {
            if (!searchCateGory.is(e.target) && searchCateGory.has(e.target).length === 0) {
                searchCateGory.css('display', 'none');
                isHidden = true;
            }
        })

        //7. 自动生成商品编号
        function createProId(proTypeId) {
            $.get(
                '/searchProId/' + proTypeId,
                function(obj) {
                    $('input[name=proId]').val(obj)
                }
            )
        }

        //单位信息
        $.ajax({
            url: '/searchProductUnit',
            dataType: 'json',
            type: 'get',
            success: function(data) {
                $.each(data, function(index, item) {
                    // 下拉菜单里添加元素
                    $('#searchUnit').append(new Option(item.unitName, item.unitId));
                });
                //重新渲染 固定写法
                layui.form.render("select");
            }
        });
        //增加新的单位
        form.on('select(searchUnit)', function(data) {
            //判断是否点击的是新增单位
            if (data.value == "newUnit") {
                $('select[name=unitId]').val("");
                addNewUnit();
            }
        })

        //新增单位弹出层
        function addNewUnit() {
            indexList[0] = layer.open({
                type: 1,
                title: ['增加单位'],
                area: ['335px', '160px'],
                shadeClose: false, //点击遮罩关闭
                scrollbar: false,
                content: $("#addNewUnit"),
                cancel: function() { //点击右上角的 × 触发的事件
                    //清空选择框的选项
                    $('select[name=unitId]').val("");
                    //select重载
                    form.render('select');
                }
            })
        }
        //点击确定 新增单位
        $("#unitCon").on('click', function() {
            //新增单位名称
            var unitName = $("#unitName").val();
            if (unitName != "" && null != unitName) {
                //新增单位编号
                //插入数据并自动生成编号
                $.get(
                    '/updateProUnit', {
                        unitId: "unitId",
                        unitName: unitName
                    },
                    function(obj) {
                        //下拉框增加optionx
                        $("select[name=unitId]").append(new Option(unitName, obj.unitId));
                        //输入框赋值
                        $("select[name=unitId]").val(unitName);
                        //下拉框重新渲染
                        form.render('select');
                    }
                );

                layer.close(indexList[0]);
            } else {
                layer.msg("单位名称不能为空", {
                    time: 800
                });
            }
        })
        //点击退出 关闭弹窗
        $("#unitExi").on('click', function() {
            //清空选择框的选项
            $('select[name=unitId]').val("");
            //select重载
            form.render('select');

            layer.close(indexList[0]);
        })


        //药剂类型信息
        $.ajax({
            url: '/searchAgentiaType',
            dataType: 'json',
            type: 'get',
            success: function(data) {

                $.each(data, function(index, item) {
                    // 下拉菜单里添加元素
                    $('#searchAgentia').append(new Option(item.agentiaTypeName, item
                        .agentiaTypeId));
                });
                //重新渲染 固定写法
                layui.form.render("select");
            }
        });
        //增加新的药剂类型
        form.on('select(searchAgentia)', function(data) {
            //判断是否点击的是新增单位
            if (data.value == "newAgentia") {
                $('select[name=agentiaId]').val("");
                addNewAgentia();
            }
        })

        //新增单位弹出层
        function addNewAgentia() {
            indexList[1] = layer.open({
                type: 1,
                title: ['增加药剂类型'],
                area: ['335px', '160px'],
                shadeClose: false, //点击遮罩关闭
                scrollbar: false,
                content: $("#addNewAgentia"),
                cancel: function() { //点击右上角的 × 触发的事件
                    //清空选择框的选项
                    $('select[name=agentiaId]').val("");
                    //select重载
                    form.render('select');
                }
            })
        }

        //点击确定 新增单位
        $("#drugCon").on('click', function() {
            //新增单位名称
            var agentiaTypeName = $("#agentiaTypeName").val();
            if (agentiaTypeName != "" && null != agentiaTypeName) {
                //新增单位编号
                //插入数据并自动生成编号
                $.get(
                    '/updateAgentiaType', {
                        agentiaTypeId: "agentiaTypeId",
                        agentiaTypeName: agentiaTypeName
                    },
                    function(obj) {

                        //下拉框增加optionx
                        $("select[name=agentiaId]").append(new Option(agentiaTypeName, obj
                            .agentiaTypeId));
                        //输入框赋值
                        $("select[name=agentiaId]").val(agentiaTypeName);
                        //下拉框重新渲染
                        form.render('select');
                    }
                );

                layer.close(indexList[1]);
            } else {
                layer.msg("单位名称不能为空", {
                    time: 800
                });
            }
        })

        //点击退出 关闭弹窗
        $("#drugExi").on('click', function() {
            //清空选择框的选项
            $('select[name=agentiaId]').val("");
            //select重载
            form.render('select');
            layer.close(indexList[1]);
        })


        // 输入商品名称 自动生成名称简拼
        $("input[name=proName]").on('keyup', function() {

            createJaneSpell($(this).val());
        })

        //自动生成名称简拼
        function createJaneSpell(proAlias) {
            $.get(
                '/generatePinyinSpelling/' + proAlias,
                function(obj) {
                    $("input[name=proAlias]").val(obj.toUpperCase());
                }
            )
        }


        //生产厂商信息
        $.ajax({
            url: '/searchManufacturerInfo',
            dataType: 'json',
            type: 'get',
            success: function(data) {
                $.each(data, function(index, item) {
                    // 下拉菜单里添加元素
                    $('#searchManufacturerId').append(new Option(item.manufacturerName, item
                        .manufacturerId));

                });
                //重新渲染 固定写法
                layui.form.render("select");
            }
        });

        //增加生产厂商
        form.on('select(searchManufacturerId)', function(data) {
            //判断是否点击的是新增单位
            if (data.value == "newManufacturer") {
                $('select[name=manufacturerId]').val("");
                addNewManufacturer();
            }
        })

        //新增生产厂商弹出层
        function addNewManufacturer() {
            indexList[2] = layer.open({
                type: 1,
                title: ['增加生产厂商'],
                area: ['335px', '190px'],
                shadeClose: false, //点击遮罩关闭
                scrollbar: false,
                content: $("#addnewManufacturer"),
                cancel: function() { //点击右上角的 × 触发的事件
                    //清空选择框的选项
                    $('select[name=manufacturerId]').val("");
                    //select重载
                    form.render('select');
                }
            })
        }

        //点击确定 新增生产厂商
        $("#ManufCon").on('click', function() {
            //新增生产厂商名称
            var manufacturerName = $("#manufacturerName").val();
            //生产许可证
            var manufacturePermit = $("#manufacturePermit").val();
            if (manufacturerName != "" && null != manufacturerName) {
                //新增生产厂商编号
                //插入数据并自动生成编号
                $.get(
                    '/updatemanufacturerInfo', {
                        manufacturerId: "manufacturerId",
                        manufacturerName: manufacturerName,
                        manufacturePermit: manufacturePermit
                    },
                    function(obj) {
                        console.log(obj)
                        //下拉框增加optionx
                        $("select[name=manufacturerId]").append(new Option(manufacturerName, obj
                            .manufacturerId));
                        //输入框赋值
                        $("select[name=manufacturerId]").val(manufacturerName);
                        $("input[name=manufacturePermit]").val(manufacturePermit);
                        //下拉框重新渲染
                        form.render('select');
                    }
                );
                layer.close(indexList[2]);
            } else {
                layer.msg("单位名称不能为空", {
                    time: 800
                });
            }
        })

        //点击退出 关闭弹窗
        $("#ManufExi").on('click', function() {
            //清空选择框的选项
            $('select[name=manufacturerId]').val("");
            //select重载
            form.render('select');
            layer.close(indexList[2]);
        })


        //新增商品
        //1.点击保存  关闭新增商品的弹窗 并提交数据
        form.on('submit(addCon)', function() {
                $("input[name=proTypeId]").val(proTypeId);
                var productInfo = $('#addProductInfo').serialize();

                $.get('/updateProductInfo', productInfo, function(obj) {
                    parent.layui.table.reload("inventoryId", {
                        url: '/searchProInfo?proName=' + '',
                    })
                })
                var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                parent.layer.close(index);


        });
        //2.点击退出 关闭新增商品的弹窗
        $("#addExi").on('click', function() {
            var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
            parent.layer.close(index);
        })


    })
</script>
</body>
</html>
